<script>
export default {
  name: "Tab",
  data(){
    return {

    }
  },
  props: {
    label: {
      type: String,
      default: "tab"
    },
    index: {
      type: [String, Number],
      default: 1
    }
  },
  mounted(){
      this.$parent.panes.push(this)
  },
  methods:{
      handlerClick(){
          this.$parent.onChanges(this.index)
      }
  },
  computed: {
    active() {
      return this.$parent.value == this.index;
    }
  },
  render() {
    let tab = this.$slots.label || this.label;
    let className = {
      tab: true,
      active: this.active
    };
    return <li class={className} onClick={ this.handlerClick }>{tab}</li>
  }
}
</script>
<style lang="less" scoped>
  .tab{
    float: left;
    // margin: 0 20/37.5rem;
    cursor: pointer;
    font-size: 0.48rem;
  }
  li:first-child{
    margin-left: 95/75rem;
    margin-right: 110/75rem;
  }
  li:last-child{
    margin-right: 110/75rem;
  }
  .active{
    border-bottom: 2px solid #fff;
  }
</style>
